<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery门户网站带缩略图相册</title>

<link href="css/pure-min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/blue.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/grids.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/album.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/base.css" rel="stylesheet" type="text/css" media="all" />

</head>
<body class="trs-tags">
<div class="header" id="header">
     <h1>jQuery 带缩略图相册效果</h1>
     <h2>一个不错的相册效果，推荐大家使用哦！</h2>	
</div><div class="content">

<div class="album" id="album">
	 <div class="album-image-md" id="album-image-md">
		  <p class="album-image-bd"><img src="img/01.jpg" class="album-image" id="album-image" alt="相册图片-示例图片（1）" width="674" height="750" /></p>	  
	 	  <p class="album-image-ft" id="album-image-ft">相册图片-示例图片（1）</p>
		  <a class="album-download" id="album-download" href="img/01.jpg" target="_blank"><span>下载图片</span></a>
		  <ul class="album-image-nav hide" id="album-image-nav">
		  	  <li class="album-image-nav-left-block" id="album-image-nav-left-block"><a href="#prev-image" class="album-image-btn-prev" id="album-image-btn-prev">‹</a></li>
			  <li class="album-image-nav-right-block" id="album-image-nav-right-block"><a href="#next-image" class="album-image-btn-next" id="album-image-btn-next">›</a></li>
		  </ul>
		  <p class="album-image-loading-overlay hide" id="album-image-loading-overlay"><img src="img/loading.gif" alt="loading..." width="100" height="100" /></p>
	 </div>
	 <div class="album-carousel" id="album-carousel">
	 	  <a href="#prev-group" class="album-carousel-btn-prev" id="album-carousel-btn-prev">‹</a>
		  <div class="album-carousel-zone" id="album-carousel-zone">
		  <ul class="album-carousel-list" id="album-carousel-list">
		  	  <li class="album-carousel-thumb album-carousel-thumb-selected"><a href="img/01.jpg"><img src="img/s-01.jpg" alt="相册图片-示例图片（1）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/02.jpg"><img src="img/s-02.jpg" alt="相册图片-示例图片（2）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/03.jpg"><img src="img/s-03.jpg" alt="相册图片-示例图片（3）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/04.jpg"><img src="img/s-04.jpg" alt="相册图片-示例图片（4）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/05.jpg"><img src="img/s-05.jpg" alt="相册图片-示例图片（5）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/06.jpg"><img src="img/s-06.jpg" alt="相册图片-示例图片（6）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/07.jpg"><img src="img/s-07.jpg" alt="相册图片-示例图片（7）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/08.jpg"><img src="img/s-08.jpg" alt="相册图片-示例图片（8）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/09.jpg"><img src="img/s-09.jpg" alt="相册图片-示例图片（9）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/10.jpg"><img src="img/s-10.jpg" alt="相册图片-示例图片（10）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/11.jpg"><img src="img/s-11.jpg" alt="相册图片-示例图片（11）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/12.jpg"><img src="img/s-12.jpg" alt="相册图片-示例图片（12）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/13.jpg"><img src="img/s-13.jpg" alt="相册图片-示例图片（13）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/14.jpg"><img src="img/s-14.jpg" alt="相册图片-示例图片（14）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/15.jpg"><img src="img/s-15.jpg" alt="相册图片-示例图片（15）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/16.jpg"><img src="img/s-16.jpg" alt="相册图片-示例图片（16）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/17.jpg"><img src="img/s-17.jpg" alt="相册图片-示例图片（17）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/18.jpg"><img src="img/s-18.jpg" alt="相册图片-示例图片（18）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/19.jpg"><img src="img/s-19.jpg" alt="相册图片-示例图片（19）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/20.jpg"><img src="img/s-20.jpg" alt="相册图片-示例图片（20）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/21.jpg"><img src="img/s-21.jpg" alt="相册图片-示例图片（21）" width="230" height="144" /></a></li>
		  	  <li class="album-carousel-thumb"><a href="img/22.jpg"><img src="img/s-22.jpg" alt="相册图片-示例图片（22）" width="230" height="144" /></a></li>
		  </ul>
		  </div>
	 	  <a href="#next-group" class="album-carousel-btn-next" id="album-carousel-btn-next">›</a>
	 </div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script type="text/javascript" src="js/album.js"></script>
<script type="text/javascript">
var Album = new jQuery.Album();
</script>

</body>
</html>